// Global mixins.

// Sets font styles.
@mixin font-setup($size, $height, $weight: false, $rem: true) {
  @if $rem {
    font-size: px-to-rem($size);
  } @else {
    font-size: px-to-em($size);
  }

  line-height: ($height / $size);
  @if $weight {
    font-weight: $weight;
  }
}

// Sets a flexible font size
//
// @param {length()} $sm - List of lengths, in px, representing font size and line height of the smallest size
// @param {length()} $md - List of lengths, in px, representing font size and line height of the medium size
// @param {length()} $lg - List of lengths, in px, representing font size and line height of the largest size
// @param {number | boolean} $weight - Font weight, or false
@mixin flex-font($sm, $md, $lg, $weight: false) {
  /* stylelint-disable order/order */

  // Setup basic font styling from medium size
  @include font-setup(nth($md, 1), nth($md, 2), $weight);

  // Determine scaling factor so that the large font size is reached at 1024px
  $font-scale: nth($lg, 1) / 10.24px * 1vw;
  // Set up clamp function
  $font-clamp: clamp(px-to-em(nth($sm, 1)), $font-scale, px-to-em(nth($lg, 1)));

  // Check for support for clamp function
  @supports (font-size: $font-clamp) {
    // Set font size to clamp
    font-size: $font-clamp;
    // Set line height to ratio of largest line height to font size (unitless number)
    line-height: nth($lg, 2) / nth($lg, 1);
  }
}

// Sets elevation styles.
@mixin elevation-setup($key-offset-y, $key-spread, $ambient-offset-y, $ambient-spread, $ambient-blur) {
  $shadow-color: rgba(get-color('grey-800'), 0.3);
  $ambient-color: rgba(get-color('grey-800'), 0.15);
  box-shadow: 0 $key-offset-y $key-spread 0 $shadow-color, 0 $ambient-offset-y $ambient-spread $ambient-blur $ambient-color;
}

// Sets styles for a specific level of elevation (between 0-5).
@mixin elevation($level) {
  @if ($level == 1) {
    @include elevation-setup(1px, 2px, 1px, 3px, 1px);
  } @else if ($level == 2) {
    @include elevation-setup(1px, 2px, 2px, 6px, 2px);
  } @else if ($level == 3) {
    @include elevation-setup(1px, 3px, 4px, 8px, 3px);
  } @else if ($level == 4) {
    @include elevation-setup(2px, 3px, 6px, 10px, 4px);
  } @else if ($level == 5) {
    @include elevation-setup(4px, 4px, 8px, 12px, 6px);
  } @else {
    // Elevation level 0 is just a border
    border: 1px solid get-color('grey-300');
  }
}

// Set an element to be the full viewport width.
// Then set its left edge to the center of its parent element.
// Then use calc to shift it over 50vw to the left, 
// thereby centering it on the screen.
@mixin full-bleed() {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

// Mixin to add custom scrollbars to an element
// nb. Copied from web.dev's mixins

// @param {?string=} $size - Width of the scrollbar in pixels
// @param {?string=} $thumbColor - Color of the scrollbar thumb
// @param {?string=} $trackColor - Color of the scrollbar track
@mixin scrollbars(
  $size: 10px,
  $thumbColor: get-color('grey-500'),
  $trackColor: transparent
) {
  /* stylelint-disable scss/selector-no-redundant-nesting-selector */
  & {
    // Sass Lint doesn't recognize these shiny new properties
    scrollbar-color: $thumbColor $trackColor;
    scrollbar-width: thin;
  }

  &::-webkit-scrollbar {
    height: $size;
    width: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumbColor;
    background-clip: padding-box;
    border: ($size / 4) solid $trackColor;
    border-radius: ($size / 2);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: darken($thumbColor, 12%);
  }

  &::-webkit-scrollbar-thumb:active {
    background-color: darken($thumbColor, 22%);
  }

  &::-webkit-scrollbar-track {
    background: $trackColor;
  }
}
